#{extends 'main.html' /} #{set title:'ActionPlanView' /}
<head>
    <!-- the important part here !!! -->
    <script type="text/javascript">
    var x = "true";
    function showCommentsDiv() {
		$('#commentsDiv').toggle(1000);
	}
    
    $(function(){
    	   
    		$('#ideaDevForm').hide();
            $('#form').hide();
            $('#existingIdeaDevs').hide();
            $('#existingIdeas').hide();
            $('#ideaForm').hide();
            $('#dateForm').hide();
            $('#ids').hide();
            $('#idvs').hide();
	       	$('#itemForm').hide();
	       	$('#tpcs').hide();
	       	
       //    $('#one').jGrowl(document.getElementById("developerOrOrganizer").value);
            
            $("#actionItems").accordion();
            
            
            if (document.getElementById("developerOrOrganizer").value == "developer") {
                $('#assignReqStatus').hide();
                $('#assignDates').hide();
                $('#addIdeas').hide();
                $('#addIdeaDevs').hide();
                $('#CreateItem').hide();

            }
            $('#TagBox').hide();
    		$('#AddTag').hide();
    		$('#Tag').hide();
    		$('#TagOptions').hide();
    		$('#EditBox').hide();
    		$('#Cancel').hide();
    		$('#hideTags').hide();
    		$('#hideOptions').hide();
    		$('#overlay').hide();
    		$('#CommentsTitle').hide();
        });
 
        function showForm(){
            $('#form').show(1000);
            
        }
        
        function showDateForm(){
            $('#dateForm').show(1000);
            
        }
        
        function showIdeaDevForm(){
        	getIdeaDevListG();
            getPlanIdeaDevListG();
            $('#ideaDevForm').show(1000);
            $('#existingIdeaDevs').show(1000);

            
        }
        
        function showIdeaForm(){
        	getIdeaListG();
            getPlanIdeaListG();
            $('#ideaForm').show(1000);
            $('#existingIdeas').show(1000);

            
        }
        function showIdeaSList(){
        	getPlanIdeaListG();
            $('#existingIdeas').show(1000);
          
        }
        function showIdeaDevSList(){
        	getPlanIdeaDevListG();
            $('#existingIdeaDevs').show(1000);

            
                }
  
        function actionItemButtons(actionItemId){
            window.location = "http://localhost:9000/ActionPlanController/ActionItem";
            
        }
   
        function assPlanReqStatus(){
        
            $.getJSON('@{ActionPlanController.assignPlanRequirmentStatus()}', {
                'planId': document.getElementById("actionPlanID").value,
                'organizerId': document.getElementById("organizerID").value,
                'req': document.getElementById("reqTxtArea").value,
                'status': document.getElementById("statusTxtArea").value
            }, function(data){
				$('#one').jGrowl(data.res);	
                document.getElementById("status").innerHTML = data.status;
                document.getElementById("req").innerHTML = data.req;
            });
            
            $('#form').hide(1000);
        }
   
    var yearT;
    var monthT;
    var dayT;
    var selectedDate;
    	
    	$(function() {
    		$( "#datepicker" ).datepicker();
    	});

       function srcChange(selDate){
    	   selectedDate=selDate;
       }
    	function setDates(){
    		if(selectedDate=="vInit"){$('#one').jGrowl("Kindly, choose Start/End date");} 
    		else if(selectedDate=="StartDate"){setPlanStartDate();}
    		else if(selectedDate=="EndDate"){setPlanEndDate();}
    		 }
    
    function setPlanStartDate() {
    
    
    	$.getJSON('@{ActionPlanController.setStartDate()}', {
    		'planId' :      document.getElementById("actionPlanID").value,
    		'organizerId' : document.getElementById("organizerID").value,
    		 'startdate': document.getElementById("datepicker").value
    	}, function(data) {
    		$('#one').jGrowl(data.res);
    		$('#dateForm').hide(1000);
    
    	});
    	
    }
    
    function setPlanEndDate() {
        
        
    	$.getJSON('@{ActionPlanController.setEndDate()}', {
    		'planId' :      document.getElementById("actionPlanID").value,
    		'organizerId' : document.getElementById("organizerID").value,
    		 'endDate': document.getElementById("datepicker").value
    	}, function(data) {
    		$('#one').jGrowl(data.res);
    		$('#dateForm').hide(1000);
    
    	});
    	
    }
    
    
    function getPDates() {
        
        
    	$.getJSON('@{ActionPlanController.getDates()}', {
    		'planID' :      document.getElementById("actionPlanID").value
    	}, function(data) {
    		$('#one').jGrowl(data.res);
    	
    
    	});
    	
    }


            
    </script>
    <script type="text/javascript">
        
        var freeze = 0;
        var follow = 0;
        // var a = [document.getElementById("star1"), document.getElementById("star2"), document.getElementById("star3"), document.getElementById("star4"), document.getElementById("star5")]
        
        function mouseonimage(id){
        
            for (var i = 0; i < 5; i++) {
                a[i].src = "..\\..\\..\\public\\images\\disabledstar.png";
            }
            
            for (var i = 0; i < id; i++) {
            
                a[i].src = "..\\..\\..\\public\\images\\redstar.png";
            }
            
        }
        
        function mouseoutimage(){
        
            for (var i = 0; i < 5; i++) {
                a[i].src = "..\\..\\..\\public\\images\\star.png";
            }
            
            for (var i = freeze; i < 5; i++) {
            
                a[i].src = "..\\..\\..\\public\\images\\disabledstar.png";
            }
            
        }
        
        /* function resetstars(){
         for(var i = 0; i < 5; i++) {
         a[i].src = "..\\..\\..\\public\\images\\disabledstar.png";
         }
         freeze = 0;
         } */
        function loadRate(){
        	 
        	 
        	$.getJSON('@{TopicIdeaController.getActionPlanRating()}', {'actionPlanId':'${actionPlanId}'},function(data){
        			document.getElementById("currentRating").innerHTML=data.result;

        	});
        
            $.getJSON('@{TopicIdeaController.alreadyRatedActionPlan()}', {
                'actionPlanId': '${actionPlanID}'
            }, function(data){
                freeze = data.result;
                mouseoutimage();
                
            });
            
        }
        
        function rateActionPlan(rating){
        
            $.getJSON('@{TopicIdeaController.rateActionPlan()}', {
                'rate': rating,
                'actionPlanId': '${actionPlanID}'
            }, function(data){
            
                freeze = data.result;
                mouseoutimage();
            });
            
            loadRate();
            
        }
    </script>
    <script type="text/javascript">
    var arr;
    var option;
    var IdeaDevT;
    var selectedDate;
    function ideaDevChange(selIdeaDev){
        IdeaDevT = selIdeaDev
    }
    
    
    
    function assignIdeaDevToPlan(){
    
        $.getJSON('@{ActionPlanController.assignIdeaDevToPlan()}', {
            'planId': document.getElementById("actionPlanID").value,
            'organizerId': document.getElementById("organizerID").value,
            'IdeaDevId': IdeaDevT
        }, function(data){
            $('#one').jGrowl(data.res);
            $('#ideaDevForm').hide(1000);
            $('#existingIdeaDevs').hide(1000);

            
        });
        
    }
    
    function getIdeaDevListG(){
    
    
    
    
        var temp = document.getElementById("ideaDevList");
        
        $.getJSON('@{ActionPlanController.recentlyAddedIdeadevs()}', {
            'actionPlanID': document.getElementById("actionPlanID").value
        }, function(data){
            if (data == null || data.length == 0) {
                $('#one').jGrowl("no idea Developers ..");
                $('#ideaDevForm').hide(1000);
                
            }
            else {
                $('#one').jGrowl(data.length + " Idea developers found,kindly choose one");
                temp.length = 0;
                temp.options[0] = new Option("Idea Developers");
                for (var i = 1; i <= data.length; i = i + 1) {
                    option = new Option(data[i - 1].name + "", data[i - 1].id + "");
                    temp.options[i] = option;
                }
                
            }
            
        });
        
    }
    function hideIdeaDev(){
           $('#existingIdeaDevs').hide(1000);

    }
    function getPlanIdeaDevListG(){
        var str ="<P>IdeaDevelopers in the plan:</P>";
        	document.getElementById("existingIdeaDevs").innerHTML="";
		   $.getJSON('@{ActionPlanController.getPlanIdeaDevs()}', {
                'actionPlanID': document.getElementById("actionPlanID").value
            }, function(data){
                if (data == null || data.length == 0) {
                    $('#one').jGrowl("This plan has no ideaDevelopers ..");
                }
                else {
                    for (var i = 1; i <= data.length; i = i + 1) {
                 
str+= "<p>"+i+")<a href=\"@{UserProfile.OtherUserProfile()}?userId=" +data[i-1].id+"\">" +data[i - 1].name+"</a></p>";
                   
 }
            
 						str+=document.getElementById("idvs").innerHTML;
                    document.getElementById("existingIdeaDevs").innerHTML=str;


                }
             
            }); 
            
        }    </script>
    <script type="text/javascript">
    var arr;
    var option;
    var IdeaT;
    var selectedDate;
    function ideaChange(selIdea){
        IdeaT = selIdea
    }
    
    
    
    function assignIdeaToPlan(){
   
        $.getJSON('@{ActionPlanController.assignIdeaToPlan()}', {
            'planId': document.getElementById("actionPlanID").value,
            'organizerId': document.getElementById("organizerID").value,
            'IdeaId': IdeaT
        }, function(data){
            $('#one').jGrowl(data.res);
            $('#ideaForm').hide(1000);
            $('#existingIdeas').hide(1000);

            
        });}
        
    
    function hideIdea(){
        $('#existingIdeas').hide(1000);

 }
    function getIdeaListG(){
    
    
    
    
        var temp = document.getElementById("ideaList");
        
        $.getJSON('@{ActionPlanController.recentlyAddedIdeas()}', {
            'actionPlanID': document.getElementById("actionPlanID").value
        }, function(data){
            if (data == null || data.length == 0) {
                $('#one').jGrowl("This organization has no ideas ..");
                $('#ideaForm').hide(1000);
                $('#existingIdeas').hide(1000);

                
            }
            else {
                $('#one').jGrowl(data.length + " ideas found, kindly choose one");
                temp.length = 0;
                temp.options[0] = new Option("Ideas", "Ideas");
                
                for (var i = 1; i <= data.length; i = i + 1) {
                    option = new Option(data[i - 1].name + "", data[i - 1].id + "");
                    temp.options[i] = option;
                }
                
            }
            
        });
        
    }
    
    function getPlanIdeaListG(){
    var str ="<P>Ideas in the plan:</P>";
    	document.getElementById("existingIdeas").innerHTML="";
	   $.getJSON('@{ActionPlanController.getPlanIdeas()}', {
            'actionPlanID': document.getElementById("actionPlanID").value
        }, function(data){
            if (data == null || data.length == 0) {
                $('#one').jGrowl("This plan has no ideas ..");
            }
            else {
                for (var i = 1; i <= data.length; i = i + 1) {
             
str+= "<p>"+i+")<a href=\"@{TopicIdeaController.checkAuthorizationToViewIdea()}?ideaId=" +data[i-1].id+"\">" +data[i - 1].name+"</a></p>";
               
}
                str+=document.getElementById("ids").innerHTML;
                document.getElementById("existingIdeas").innerHTML=str;
                
            	$('#existingIdeas').show(1000);


            }
         
        }); 
        
    }
    </script>
    <script>
                function showMembers(){
                	if(document.getElementById("members").innerHTML==""){
                		id = ${actionPlanID};
                		$.getJSON('@{BrowseController.browseMembersInActionPlanOrganization()}', {'actionPlanId':id}, function(data) {
                			var members = "";
                			if(data.members != null){
                				if(data.members != "-1"){
                					var userNames = data.members.split('&&');
                					for(var i = 0; i < userNames.length - 1; i = i+1){
                						var user = userNames[i]
                						members += "<a href='#' onclick=\"shareWith('" + user + "')\">" + user + "</a></br>";
                					}
                				} else {
                					members += "No members to show";
                				}
                			}
                			members += "<input type=\"button\" id=\"hideMembers\" value=\"Done!\" onclick=\"$('#members').fadeOut(1000)\"/>"
                			document.getElementById("members").innerHTML = members;
                			$('#members').hide();
                			$('#members').toggle(1000);
                		});
                	} else {
                		$('#members').toggle(1000);
                	}
                }
            
    </script>
    <script>
                function shareWith(user){
                	$.getJSON('@{ActionPlanController.shareActionPlan()}', {'recieverUserName':user, 'actionPlanId':${actionPlanID}}, function(data){
                		$('#one').jGrowl(data.response);
                	});
                	//$('#members').hide(1000);
                }
            
    </script>
    <script type="text/javascript">
                	   	$(function() {
                        var itemsIds='${itemsIds}'.split("#");
                
                       for(var i=0;i<'${actionItems.size()}';i=i+1){
                       $('#firstForm'+itemsIds[i]).hide();
                       if (document.getElementById("developerOrOrganizer").value == "developer") {
                    	   $('#ViewRequests'+itemsIds[i]).hide();
                    	   $('#RelateItemToTopic'+itemsIds[i]).hide();
                    	   $('#TagActions'+itemsIds[i]).hide();
                    	  
                       }
                       }
                 });
                
                	function showTextBox(actionItemId) {
                		$('#firstForm'+actionItemId).show(1000);
                	}
                
                	function volunteerOnTheActionItem(actionItemId) {
                		
                		$.getJSON('@{ActionPlanController.volunteerToWorkOnActionItem()}', {
                			'ideaDeveloperId' :'${ideaDeveloperId}',
                			'actionItemId' : actionItemId,
                			'body' : document.getElementById("textBox"+actionItemId).value
                		}, function(data) {
                			$('#one').jGrowl(data.res);
                		});
                		$('#firstForm'+actionItemId).hide(1000);
                
                               	}
                        function showRequests(actionItemId){
                        	document.getElementById('Requests'+actionItemId+"").innnerHTML="";
                        	//$('#one').jGrowl(document.getElementById("developerOrOrganizer").value);
                        	//$('#Requests'+actionItemId).hide()
                        	if (document.getElementById("developerOrOrganizer").value == "developer"){
                        		$('#one').jGrowl("Sorry, you are not allowed to view the requests");
                        	}
                        	else{
                        		
                                
                                $.getJSON('@{ActionPlanController.getActionItemRequests()}', {
                			'actionItemId' :actionItemId
                		}, function(data) {
                			if(data.requests!=""){
                			var requests=data.requests.split("&");
                	
                                        var requestsIds=data.requestsIds.split("&");
                                        for(var i=0;i<requests.length;i=i+1){
                                                                              		
                                        
                                     $('#Requests'+actionItemId).append("<div id="+requestsIds[i]+">"+requests[i]+
                "<input id= name= type='button'value='accept' onclick='javascript:acceptRequest("+requestsIds[i]+")'/> <input id= name= type='button'value='reject' onclick='javascript:rejectRequest("+requestsIds[i]+")'/></div>");
                                        	
                                        }       
                                        
                			}
                			else {$('#one').jGrowl("No requests on this item");;}
                		
                		
                                          
                		});
                       ///         $('#one').jGrowl(123);
                		
                        		}
                        		}
                        
                
                	function acceptRequest(requestId) {
                
                		$.getJSON('@{ActionPlanController.acceptVolunteerRequest()}', {
                			'organizerId' : '${organizerID}',
                			'requestId' : requestId
                		}, function(data) {
                			$('#one').jGrowl(data.res);
                		});
                		
                		
                $('#'+requestId).hide(1000);
                	}
                
                	function rejectRequest(requestId) {
                		$.getJSON('@{ActionPlanController.rejectVolunteerRequest()}', {
                			'organizerId' : '${organizerID}',
                			'requestId' : requestId
                		}, function(data) {
                			$('#one').jGrowl(data.res);
                		});
                	$('#'+requestId).hide(1000);
                        }
       				
                	function reportCommentAsSpam(id){
                	      $.ajax({
                		type: "POST",
                		url: '@{TopicIdeaController.reportAsSpam()}',
                		data: {'id':id,'ideaDeveloperId':'${ideaDeveloperId}','type':"comment"}
                		});
                	    //    $(document.getElementById("Report"+id)).hide();
                	}
                	
                	function addComment() {
                		 var isAlphaNeumeric =/^[0-9a-zA-Zs ]+$/;
                	     var isAllSpace = /^[\s ]*$/;
                		if (document.getElementById("CommentBox").value.length > 256){
                	        $('#one').jGrowl("Text too long. Must be 256 characters or less");
                	    } else if(document.getElementById("CommentBox").value == ""){
                	    	$('#one').jGrowl("Comment box is empty !");
                	    } else if(!isAlphaNeumeric.test(document.getElementById("CommentBox").value)){
                	    	$('#one').jGrowl("Comments should be of alpha numeric characters only");
                	    } else if(isAllSpace.test(document.getElementById("CommentBox").value)){
                	    	$('#one').jGrowl("Comment box is empty !");
                	    }
                		else { 
                		body = document.getElementById("CommentBox").value.trim();
                		$.getJSON('@{TopicIdeaController.addComment()}',{'body' : body, 'ID' : ${actionPlanID}, 'type': "actionplan"} ,function(data) {
                			commentInfo={};
                			commentInfo = data.box.split("!id#");
                			document.getElementById("ideaComments").innerHTML += "<br><br><a id=\"CommentUser"+commentInfo[1]+"\" href=\"@{UserProfile.OtherUserProfile()}?userId=${ideaDeveloperId}\">" + '${ideaDeveloperName}' + " said:" + "</a>";
                			document.getElementById("ideaComments").innerHTML += "<textarea  id=\"Comment"+commentInfo[1]+"\" disabled=\"true\" rows = \"5\" cols=\"57 max\" style=\"border: 2px solid gray;font:16pt; courier; color:blue; resize:none;\">" +"..:: Comment "+ document.getElementById("commentNumber").value + " ::.. " + body+ " </textarea> "; 
                			document.getElementById("ideaComments").innerHTML += "<input type=\"button\" id=\"Report"+commentInfo[1]+"\"  value=\"Report\" onclick=\"reportCommentAsSpam('"+commentInfo[1]+"')\"  /> ";
                			document.getElementById("ideaComments").innerHTML += "<input type=\"button\" id=\"Remove"+commentInfo[1]+"\"  value=\"Delete Comment\" onclick=\"removeComment('"+commentInfo[1]+"')\"  />";
                			counter = document.getElementById("commentNumber").value;
                			counter ++;
                			document.getElementById("commentNumber").value = counter;
                			document.getElementById("CommentBox").value = "";
                		});
                		$(("#commentsDiv")).slideUp(1000);
                		}
                	}
                	
                	function initializeIdeaComments(){
                		if(document.getElementById("commentFlag").value != "commentsShown"){
                		refreshIdeaComments();
                		} 
                		addComment();
                	}
                	
                	function removeComment (commentID){
                		$(("#CommentUser"+commentID+"")).toggle(1000);
                		$(("#Comment"+commentID+"")).slideUp(1000);
                		$(("#Remove"+commentID+"")).fadeOut(1000);
                		$(("#Report"+commentID+"")).fadeOut(1000);
                		$.getJSON('@{TopicIdeaController.removeComment()}',{'ID' : commentID} ,function(data) {
                		});
                	}
                	
                	function showRefreshedComments(){
                		if(document.getElementById("commentFlag").value != "commentsShown"){
                		refreshIdeaComments();
                		$(("#ideaComments")).hide();
                		$(("#ideaComments")).slideDown();
                		} else {
                			$(("#ideaComments")).toggle(1000);
                		}
                	}
                	
                	function refreshIdeaComments() {
                		$('#CommentsTitle').slideDown();
                		var commentInfo={};
                		var commentCreator={};
                		$.getJSON('@{TopicIdeaController.showActionPlanComments()}',{'ID':${actionPlanID}},function(data) {
                			document.getElementById("ideaComments").innerHTML = "";
                			counter = document.getElementById("commentNumber").value;
                			for(var i = 0 ; i < data.length ; i++){
                				commentInfo = data[i].split("!id#");
                				commentMoreInfo = commentInfo[3].split("!crtr#");
                				//$('#one').jGrowl(commentInfo[0] + " has ID " + commentCreator[0] + "and is created by User ID" + commentCreator[1]);
                				document.getElementById("ideaComments").innerHTML += "<br><br><a id=\"CommentUser"+commentMoreInfo[0]+"\" href=\"@{UserProfile.OtherUserProfile()}?userId="+commentInfo[2]+"\">" + ""+commentInfo[1]+" said:" + "</a>";
                				document.getElementById("ideaComments").innerHTML += "<textarea  id=\"Comment"+commentMoreInfo[0]+"\" disabled=\"true\" rows = \"5\" cols=\"57 max\" style=\"border: 2px solid gray;font:16pt; courier; color:blue; resize:none;\">"+ "..:: Comment " +counter+ " ::.. "+commentInfo[0]+" </textarea>"; 
                				document.getElementById("ideaComments").innerHTML += "<input type=\"button\" id=\"Report"+commentMoreInfo[0]+"\"  value=\"Report\" onclick=\"reportCommentAsSpam('"+commentMoreInfo[0]+"')\"/> ";
                				if(commentMoreInfo[1] != "NoButton"){
                					document.getElementById("ideaComments").innerHTML += "<input type=\"button\" id=\"Remove"+commentMoreInfo[0]+"\"  value=\"Delete Comment\" onclick=\"removeComment('"+commentMoreInfo[0]+"')\"  />";
                				}
                				counter ++;
                			}
                			document.getElementById("commentNumber").value = counter;
                		});

                		document.getElementById("commentFlag").value = "commentsShown";
                	}
                	
                	function showBox() {
                		$('#showBox').hide();
                		$('#AddTag').show();
                		$('#TagBox').show();
                		$('#Cancel').show();
                	}

                	function hideBox() {
                		$('#showBox').show();
                		$('#AddTag').hide();
                		$('#TagBox').hide();
                		$('#Cancel').hide();
                	}

                	function showTags() {
                		$('#Tag').show();
                		$('#hideTags').show();
                		$('#showTags').hide();
                		
                	}

                	function hideTags() {
                		$('#Tag').hide();
                		$('#showTags').show();
                		$('#hideTags').hide();
                	}

                	function hideOptions() {
                		$('#TagOptions').hide();
                		$('#EditBox').hide();
                		$('#hideOptions').hide();
                	}


                	function addEditedTag(deleted) {
                		id = document.getElementById("TagTypeId").value;
                		name = document.getElementById("EditBox").value;
                		NoSpace = 1;
                		for(i = 0; i < name.length; i++){
                			if(name[i] == " "){
                				NoSpace = 0;
                			}
                		} 
                		if(NoSpace){
                		if(name.length > 25){
                			$('#one').jGrowl("Tags should not exceed 25 characters !")
                		} else if(name.length == ""){
                			$('#one').jGrowl("Tag is empty !");
                		}
                		else{
                		$.getJSON('@{TopicIdeaController.addTag()}',{'name' : name,'ID':id, 'type':"actionitem"},function(data){
                	 	if ((data.box != "Already Exists") && (data.box != "Tags should not exceed 25 characters !") && (data.box != "Tag is empty !")) {
                	 	document.getElementById("Tag").innerHTML += "<input type=\"button\" value=\""+name+"\" id=\""+"Tag"+name+"\" onclick=\"showOptions('"+name+"')\" />";
                	 	removeTag(deleted);
                	 	}
                		});}}else {
                			$('#one').jGrowl("Tags should not contain any spaces !");
                		}
                	}

                	function showOptions(tagname){
                		document.getElementById("TagOptions").innerHTML = "";
                		document.getElementById("TagOptions").innerHTML += "<input type=\"button\" value=\"Edit "+tagname+"\" id=\""+"Edit "+tagname+"\" onclick=\"addEditedTag('"+tagname+"')\" />";
                		document.getElementById("TagOptions").innerHTML += "<input type=\"button\" value=\"Remove "+tagname+"\" id=\""+"Remove "+tagname+"\" onclick=\"removeTag('"+tagname+"')\" />";
                		//document.getElementById("TagOptions").innerHTML += "<input type=\"button\" value=\"Follow "+tagname+"\" id=\""+"Follow "+tagname+"\" onclick=\"followTag('"+tagname+"')\" />";
                		$('#EditBox').show();
                		$('#TagOptions').show();
                		$('#hideOptions').show();
                	}

                	function addTag(id) {
                		name = document.getElementById("TagBox").value;
                		NoSpace = 1;
                		for(i = 0; i < name.length; i++){
                			if(name[i] == " "){
                				NoSpace = 0;
                			}
                		} 
                		if(NoSpace){
                		if(name.length > 25){
                			$('#one').jGrowl("Tags should not exceed 25 characters !")
                		} else if(name.length == ""){
                			$('#one').jGrowl("Tag is empty !");
                		}
                		else{
                		$.getJSON('@{TopicIdeaController.addTag()}',{'name' : name,'ID':id, 'type':"actionitem"},function(data){

                	 	if ((data.box != "Already Exists") && (data.box != "Tags should not exceed 25 characters !") && (data.box != "Tag is empty !")) {
                	 	document.getElementById("Tag").innerHTML += "<input type=\"button\" value=\""+name+"\" id=\""+"Tag"+name+"\" onclick=\"showOptions('"+name+"')\" />";
                	 	}
                		});}} else {
                				$('#one').jGrowl("Tags should not contain any spaces!");	
                		}
                	}

                	function removeTag(name) {
                		document.getElementById("TagOptions").innerHTML = "";
                		id = document.getElementById("TagTypeId").value;
                		$.getJSON('@{TopicIdeaController.removeTag()}',{'name' : name,'ID':id, 'type':"actionitem"},function(data) {
                			showTagTag(document.getElementById("TagTypeId").value);
                		$('#EditBox').hide();
                	});
                	}

                	function showTagTag(id){
                		if (document.getElementById("developerOrOrganizer").value == "developer"){
                    		$('#one').jGrowl("Sorry, you are not allowed to edit tags");
                		}
                		else{
                			
                		
                		var tags={};
                		document.getElementById("Tag").innerHTML ="";
                		document.getElementById("TagTypeId").value = id;
                		type = "actionitem";
                		document.getElementById('overlay').style.height = overlayer()[1]+'px';
                		$(document.getElementById('overlay')).fadeIn(1000);
                		$(document.getElementById("zeinTag")).fadeIn(1000);
                		document.getElementById('zeinTag').focus();
                		$.getJSON('@{TopicIdeaController.showTags()}',{'ID':id, 'type':"actionitem"},function(data) {	
                			if(data.box.length>0){
                		tags = data.box.split("$$");
                		for(var i = 0 ; i < tags.length ; i=i+1){
                	 	document.getElementById("Tag").innerHTML += "<input type=\"button\" value=\""+tags[i]+"\" id=\""+"Tag"+type+""+tags[i]+"\" onclick=\"showOptions('"+tags[i]+"')\" />";
                	 	 }
                		}
                	});
                		}
                	}
                	
                	function showIdeaTags(id, type){
                		var tags={};
                		$.getJSON('@{TopicIdeaController.showTags()}',{'ID':id, 'type':type},function(data) {
                		tags = data.box.split("$$");
                		document.getElementById("actionItemTags"+id+"").innerHTML = "";
                		for(var i = 0 ; i < tags.length ; i=i+1){
                			document.getElementById("actionItemTags"+id+"").innerHTML+= "<a href=\"@{TagPage.TagView()}?name="+tags[i]+"\">" + ""+tags[i]+"" + "</a>   ";
                		}
                	});
                	}

                	function hideTagTag(){
                		document.getElementById("TagBox").value = "";
                		document.getElementById("EditBox").value = "";
                		showIdeaTags(document.getElementById("TagTypeId").value, "actionitem");
                		hideTags();
                		hideOptions();
                		hideBox();
                		$(document.getElementById("overlay")).fadeOut(1000);
                		$(document.getElementById("zeinTag")).fadeOut(1000);
                	}

                	function overlayer(){
                		 if (document.body.scrollHeight>document.body.offsetHeight){
                			 return [document.body.scrollWidth,document.body.scrollHeight];
                		 } else {
                		 return [document.body.offsetWidth,document.body.offsetHeight];
                		}
                	}

    </script>
    
       
<script type="text/javascript">
    	function CreateItem() {
    		$('#itemForm').show(1000);

    		 $.getJSON('@{ActionPlanController.getStartAndEndDatesDetails()}', {
    	            'PlanID': document.getElementById("actionPlanID").value
    	        }, function(data){
                
    	       		$( "#ItemStartDate").datepicker({ minDate:new Date((data[2]+1900),data[1],data[0]), maxDate: new Date((data[5]+1900),data[4],data[3])});
    	     		
    	       		$( "#ItemEndDate").datepicker({ minDate:new Date((data[2]+1900),data[1],data[0]), maxDate: new Date((data[5]+1900),data[4],data[3])});
    	     		
    	 
    	        });
    		
    	}
    	function createItemM(){
    		
    		//CreateActionItem(long planId, long organizerId,String title, String body,String ItemStartDate, String ItemEndDate)
    		 
		if(document.getElementById("ItemStartDate").value=="mm/dd/yyyy")
			{alert("Please choose a start Date");}
		else 	if(document.getElementById("ItemEndDate").value=="mm/dd/yyyy")
		{alert("Please choose an end Date");}
		
		else{
    		
    		$.getJSON('@{ActionPlanController.CreateActionItem()}', {
	            'planId': 			document.getElementById("actionPlanID").value,
	    		'organizerId' : 	document.getElementById("organizerID").value,
				'title' :			document.getElementById("ItemTitle").value,
	            'body' :			document.getElementById("ItemDescription").value,
	            'ItemStartDate':	document.getElementById("ItemStartDate").value,
	            'ItemEndDate':		document.getElementById("ItemEndDate").value
	        }, function(data){
            
	       		alert(data.result);
	       		
	 
	        });
    		
    		$('#itemForm').hide(1000);
    		//  location.reload(true);

    		
		}
    		
    	}
    	 function hideItemDev(){
             $('#itemForm').hide(1000);
             
      }
    </script>
    <script type="text/javascript">
    
    var ItemID;
    function showItemDevForm(selItemID){
    	
    	ItemID=selItemID;
    	$("#itemTopicForm"+ItemID+"").toggle(1000);
    	getTopicListG();
      
   

        
    }
    
    var arr;
    var option;
    var TopicT;
    var selectedDate;
    function itemtopicChange(selTopic){
    	TopicT = selTopic;
    } 
    
    
    
     function relateItemToTop(){
    	 
        $.getJSON('@{ActionPlanController.relateItemToTopic()}', {
            'itemID':    ItemID,
            'organizerId': document.getElementById("organizerID").value,
            'topicID': 	TopicT
        }, function(data){
            $('#one').jGrowl(data.res);
            $("#itemTopicForm"+ItemID+"").hide(1000);

            
        });
        
    }
    
    function getTopicListG(){
    
    
    
    
        var temp = document.getElementById("itemTopic"+ItemID+"");
        
        $.getJSON('@{ActionPlanController.addedTopics()}', {
            'actionItemID': ItemID
        }, function(data){
            if (data == null || data.length == 0) {
                $('#one').jGrowl("no topics ..");
               
 
            }
            else {
                $('#one').jGrowl(data.length + " topics found,kindly choose one");
                temp.length = 0;
                temp.options[0] = new Option("Topics");
                for (var i = 1; i <= data.length; i = i + 1) {
                    option = new Option(data[i - 1].name + "", data[i - 1].id + "");
                    temp.options[i] = option;
                }
                
            }
            
        });
        
    } 
    
    function getCurTopicListG(itemID){
    	ItemID=itemID;
        var str ="<P>Topics related to this item:</P>";
        
    	//document.getElementById("existingIdeaDevs").innerHTML="";
    	//alert()
       //	document.getElementById("existingTopics"+ItemID+"").innerHTML="";
    	document.getElementById("aaa").innerHTML="";
       	$.getJSON('@{ActionPlanController.getTopicsRelatedToItem()}', {
                'actionItemID': ItemID
            }, function(data){
                if (data == null || data.length == 0) {
                    $('#one').jGrowl("This item is not related to any topic..");
                    
                }
                else {
                    for (var i = 1; i <= data.length; i = i + 1) {
                 
str+= "<p>"+i+")<a href=\"@{TopicIdeaController.CheckAuthorizationToViewTopic()}?topicId=" +data[i-1].id+"\">" +data[i - 1].name+"</a></p>";
                   
 }
            
 						str+=document.getElementById("tpcs").innerHTML;
                    document.getElementById("aaa").innerHTML=str;
                    $('#aaa').fadeIn(1000);
                    document.getElementById('overlay').style.height = overlayer()[1]+'px';
            		$(document.getElementById('overlay')).fadeIn(1000);
                }
             
            }); 
            
         
         document.getElementById("aaa").focus();
         
        }     
        
        function hideTopic(){
        	$('#aaa').fadeOut(1000);
    		$(document.getElementById('overlay')).fadeOut(1000);
        }
        
        </script>
</head>
<p>
</p>
<body>
<input type="hidden" id="TagTypeId" value=1 />
<style>
    .inputHighlighted {
        color: #ff0000;
    }
</style>
<h2 color = "black"> Action Items</h2>
<div id="actionItems">
    #{list items:actionItems, as:'actionItem'}<!--	<li>${actionItem.body}</li>--><h3><a href="#">${actionItem.body}</a></h3>
    <div id=${actionItem.id}>
        <p>
            <b>Action Item Body: </b>${actionItem.body}
        </p>
        <p>
            <b>Action Item Start Date: </b>${actionItem.itemStartDate}
        </p>
        <p>
            <b>Action Item End Date: </b>${actionItem.itemEndDate}
        </p>
        <div id="Requests${actionItem.id}">
        </div>
        <input id="Volunteer${actionItem.id}" type="button" value="Volunteer" onclick="javascript:showTextBox('${actionItem.id}')"/>
        <form id="firstForm${actionItem.id}" action="#" method="get">
            <p>
                <b>Request Body</b>
                <input type="text" id="textBox${actionItem.id}" size="50" value="" name="search" />
            </p><input type="button" value="Submit" onclick="javascript:volunteerOnTheActionItem('${actionItem.id}')"/>
        </form><input id="ViewRequests${actionItem.id}" type="button" value="View Requests" onclick="javascript:showRequests('${actionItem.id}')"/> <!-- 			<p> --><!-- 				<input id=${actionItem.id} type="button" value="Related Entities" --><!-- 					onclick="location.href='@{ActionPlanController.relatedEntities(actionItem.id)}'" /> --><!-- 				<input id=${actionItem.id} type="button" value="Related Topics" --><!-- 					onclick="location.href='@{ActionPlanController.relatedTopics(actionItem.id)}'" /> --><!-- 				<input id=${actionItem.id} type="button" value="Related Tags" --><!-- 					onclick="location.href='@{ActionPlanController.relatedTags(actionItem.id)}'" /> --><!-- 			</p> --><!-- 			<p> --><!-- 				<input id=${actionItem.id} type="button" value="Relate To Entities" --><!-- 					onclick="location.href='@{ActionPlanController.relateToEntities(actionItem.id)}'" /> --><!-- 				<input id=${actionItem.id} type="button" value="Relate To Topics" --><!-- 					onclick="location.href='@{ActionPlanController.relateToTopics(actionItem.id)}'" /> --><!-- 				<input id=${actionItem.id} type="button" value="Relate To Tags" --><!-- 					onclick="location.href='@{ActionPlanController.relateToTags(actionItem.id)}'" /> --><!-- 			</p> -->
    <input type="submit" id="TagActions${actionItem.id}" value="Edit Tags" onclick="javascript:showTagTag(${actionItem.id})" />
       <input id="RelateItemToTopic${actionItem.id}" type="button" value="Relate Action Item to topic "onclick="javascript:showItemDevForm(${actionItem.id})"/>
    <input id="getRelatedItemTopic" type="button" value="get related topics"onclick="javascript:getCurTopicListG(${actionItem.id})"/>
    
    <form id="itemTopicForm${actionItem.id}" name="ItemTopic" action="#" method="get" style="display:none;">
    
    <select id="itemTopic${actionItem.id}" onchange="javascript:itemtopicChange(this.value)" >
        <option value="topic">select Topic</option>
    </select>
    	<input type="button" value="Submit" onclick="javascript:relateItemToTop()"/>
    
    <div id="existingTopics${actionItem.id}">
      
    </div>
    

</form>
    </div>
    #{/list}
    
</div>
<p>
    <b>Plan Name: </b>
    ${actionPlan.name}
</p>
<p>
    <b>Plan Description: </b>${actionPlan.description}
</p>
<b>Plan Requirement: </b>
<p>
<c id="req">
    ${actionPlan.requirment}
</c></br>
</p>
<p>
<b>Plan Status: </b>
<c id="status">
    ${actionPlan.status}
</c>
</p>
<p>
<b>Plan Start Date: </b>  ${planStartDay}-${planStartMonth}-${planStartYear}
</p>
<p>
<b>Plan End Date: </b>  ${planEndDay}-${planEndMonth}-${planEndYear}
</p>

</br>
</br>
<h5><span>Average Rate: </span><span id="currentRating"></span></h5>
<div id="rate">
    <a href="javascript:void(0)"><img id="reset" height="17" src="../../../public/images/reset.png" onclick="rateActionPlan(0)"/></a><a href="javascript:void(0)"><img id="star1" height="20" src="../../../public/images/disabledstar.png" onmouseover="mouseonimage(1)" onmouseout="mouseoutimage()" onclick="rateActionPlan(1)"/></a><a href="javascript:void(0)"><img id="star2" height="20" src="../../../public/images/disabledstar.png" onmouseover="mouseonimage(2)" onmouseout="mouseoutimage()" onclick="rateActionPlan(2)"/></a><a href="javascript:void(0)"><img id="star3" height="20" src="../../../public/images/disabledstar.png" onmouseover="mouseonimage(3)" onmouseout="mouseoutimage()" onclick="rateActionPlan(3)"/></a><a href="javascript:void(0)"><img id="star4" height="20" src="../../../public/images/disabledstar.png" onmouseover="mouseonimage(4)" onmouseout="mouseoutimage()" onclick="rateActionPlan(4)"/></a><a href="javascript:void(0)"><img id="star5" height="20" src="../../../public/images/disabledstar.png" onmouseover="mouseonimage(5)" onmouseout="mouseoutimage()" onclick="rateActionPlan(5)"/></a>
    <script>
        
        var a = [document.getElementById("star1"), document.getElementById("star2"), document.getElementById("star3"), document.getElementById("star4"), document.getElementById("star5")];
        
        loadRate();
    </script>
</div>
<br>
<br>
<input id="CreateItem" type="button" value="Create Action Item"onclick="javascript:CreateItem()"/>
<input id="assignReqStatus" type="button" value="Assign Req & Status" onclick="javascript:showForm()"/>
<input id="assignDates" type="button" value="Assign start/end Dates"onclick="javascript:showDateForm()"/>
<input id="addIdeaDevs" type="button" value="Add IdeaDevelopers"onclick="javascript:showIdeaDevForm()"/>
<input id="addIdeas" type="button" value="Add Ideas"onclick="javascript:showIdeaForm()"/>
<input id="getIdeas" type="button" value="Get plan's Ideas List!" onclick="javascript:showIdeaSList()"/>
<input id="getIdeaDevs" type="button" value="Get plan's IdeaDevelopers List!" onclick="javascript:showIdeaDevSList()"/>
<form id="form" name="input" action="#" method="get">
    <p>
        req: <input type="text" id="reqTxtArea" name="req" value="req" />
    </p>
    <p>
        status: <input type="text" id="statusTxtArea" name="status" value="status" />
    </p>
    <!--
    planId : <input type="text" name="planId" />
    organizerId : <input type="text" name="organizerId" />
    --><input type="button" value="Submit" onclick="javascript:assPlanReqStatus()"/>
</form>
<form id="dateForm" name="dateInput" action="#" method="get">
    <input type="button" value="get Dates" onclick="javascript:getPDates()"/>

    <select id="startEnd" onchange="javascript:srcChange(this.value)">
        <option value="vInit">assign dates</option>
        <option value="StartDate">assign start date</option>
        <option value="EndDate">assign end date</option>
    </select>
    <input type="text" id="datepicker" value ="select date here" readonly >

    <input type="button" value="Submit" onclick="javascript:setDates()"/>
</form>

    
<div id="aaa" class="white_content" style="display:none;ss">
    </div>
<form id="ideaDevForm" name="IdeaDevInput" action="#" method="get">
    <select id="ideaDevList" onchange="javascript:ideaDevChange(this.value)">
        <option value="ideaDev">select IdeaDeveloper</option>
    </select>
<input type="button" value="Submit" onclick="javascript:assignIdeaDevToPlan()"/>
</form>
    <div id="existingIdeaDevs">
        <input type="button" value="OK" onclick="javascript:hideIdeaDev()"/>
    
    </div>

<form id="ideaForm" name="IdeaInput" action="#" method="get">
    <select id="ideaList" onchange="javascript:ideaChange(this.value)">
        <option value="idea">select Idea</option>
    </select>
    <input type="button" value="Submit" onclick="javascript:assignIdeaToPlan()"/>
</form>
<div id="existingIdeas">        
<input type="button" value="OK" onclick="javascript:hideIdea()"/>
</div>
<div id="ids">        
<input type="button" value="OK" onclick="javascript:hideIdea()"/>
</div>
<div id="idvs">        
<input type="button" value="OK" onclick="javascript:hideIdeaDev()"/>
</div>
<div id="tpcs">        
<input type="button" value="OK" onclick="javascript:hideTopic()"/>
</div>

<form id="itemForm" name="ItemF" action="#" method="get">

<P>Title:<input type="text" id="ItemTitle" value ="Title" ></p>
<P>Description:<input type="text" id="ItemDescription" value ="Describtion" ></p>
<P>StartDate:<input type="text" id="ItemStartDate" value ="mm/dd/yyyy" readonly></p>
<P>EndDate:<input type="text" id="ItemEndDate" value ="mm/dd/yyyy" readonly ></p>
<input type="button" value="Cancel" onclick="javascript:hideItemDev()"/>
<input type="button" value="Submit" onclick="javascript:createItemM()"/>

</form>
<input id="actionPlanID" type="hidden" value="${actionPlanID}" /><input id="organizerID" type="hidden" value="${organizerID}" /><input id="actionPlan" type="hidden" value="${actionPlan}" /><input id="developerOrOrganizer" type="hidden" value="${developerOrOrganizer}" /><input type="button" id="showMembers" value="Share" onclick="showMembers()"/>
<p>
    <span class="inputHighlighted" id="shareError"></span>
</p>
<div id="members" style="display: none" class="white_content"></div>
<input type="submit" id="ShowComments" value="Show Comments" onclick="javascript:showRefreshedComments()"/><input type="submit" id="NewComment" value="New Comment" onclick="javascript:showCommentsDiv()"/>
<div id="commentsDiv" style="display: none; margin: 20px;">
    <br>
    <textarea id="CommentBox" rows = "3" cols="30 max" style="resize: none;">
    </textarea>
    <input type="submit" name="addComment" value="Add Comment" onclick="initializeIdeaComments()"/><input type="hidden" id="type" name="ideaId" value=${type}>
</div>
<br>
<form>
    <input type="button" value="..:: Comments ::.." id="CommentsTitle" class="formbutton"/>
</form>
<br>
<div id="ideaComments" style="width: 250px">
</div>
<input type="hidden" id="commentNumber" value=1 /><input type="hidden" id="commentFlag" value="commentsNotShown" />
<div>
    <a class="frameNoRefresh" href="/ActionPlanController/Timeline?actionPlanId=${actionPlanID}">View Timeline</a>
</div>
 <a class="frameNoRefresh" href="/ActionPlanController/CalenderNew?actionPlanId=${actionPlanID}">View Calendar</a>

<input type="hidden" id="TagToEdit" value=1 />
<div id="zeinTag" style="display:none" class="white_content">
<input type="button" id="showTags" value="Show Tags" onclick="showTags()" />
<input type="button" id="hideOptions" value="Hide Options" onclick="hideOptions()" />
<input type="button" id="hideTags" value="Hide Tags" onclick="hideTags()" />
<input type="button" id="AddTag" value="Add Tag" onclick="addTag(document.getElementById('TagTypeId').value)" />
<input type="button" id="showBox" value="Create Tag" onclick="showBox()" />
<input type="text" id="TagBox" value=""/>
<input type="button" id="Cancel" value="Cancel" onclick="hideBox()" />
<input type="button" id="ClosezeinTag" value="x" onclick="hideTagTag()" style="float:right" />
<div id="Tag"></div>
<input type="text" id="EditBox" value=""/>
<div id="TagOptions">
</div>
</div>
<div id ="overlay" style="display:block; position:absolute; top:0px; left:0px; width:100%; height:100%; background-color:black; opacity:.80;">Something here</div>

</body>